import React, { Fragment } from 'react';
import {
  EyeOutlined,
  DeleteOutlined,
} from '@ant-design/icons';
import { Button } from 'antd';

const timestampToTime = (timestamp: any) => {
  const date = new Date(timestamp); // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
  const Y = `${date.getFullYear()}/`;
  const M = `${
    date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1
  }/`;
  const D = `${date.getDate()} `;
  const H = `${date.getHours()}:`;
  const m = `${date.getMinutes()}`;
  return Y + M + D + H + m;
};

const getColumns = (props: any) => {
  const columns = [
    {
      title: 'Sending Time',
      dataIndex: 'createTime',
      key: 'createTime',
      width: '15%',
      render: (_text: any, row: any) => (
        <div className='flex flex-col'>
          <div>{timestampToTime(row.createTime)}</div>
        </div>
      ),
    },
    {
      title: 'Theme',
      dataIndex: 'subject',
      key: 'subject',
      width: '15%',
      render: (_text: string, row: any) => (
        <div className='flex flex-col'>
          <div>{row.subject}</div>
        </div>
      ),
    },
    {
      title: 'Abstract',
      dataIndex: 'content',
      key: 'content',
      width: '37%',
      render: (_text: any, row: any) => (
        <div className='flex flex-col'>
          <div>{row.content}</div>
        </div>
      ),
    },
    {
      title: 'Status',
      dataIndex: 'readStatus',
      key: 'readStatus',
      width: '10%',
      render: (_text: any, row: any) => (
        <div className='flex flex-col'>
          <div style={{ color: row.readStatus === 1 ? '#4181FF' : '' }}>{row.readStatus === 1 ? 'Unread' : 'Read'}</div>
        </div>
      ),
    },
    {
      title: 'Sender',
      dataIndex: 'sendName',
      key: 'sendName',
      width: '10%',
      render: (_text: any, row: any) => (
        <div className='flex flex-col'>
          <div>{row.sendName}</div>
        </div>
      ),
    },
    {
      title: 'Action',
      dataIndex: 'action',
      key: 'action',
      width: '10%',
      render: (_text: any, row: any) => (
        <Fragment>
          <Button type='link' icon={<EyeOutlined />} onClick={() => props.showMessages(row.id, row.msgType, row.projectOwner)} />
          <Button type='link' icon={<DeleteOutlined />} onClick={() => props.deleteMessages(row.id)} />
        </Fragment>
      ),
    },
  ];

  return columns;
};

export { getColumns, timestampToTime };
